<template>
    <view class="p-bot30" :style="{ '--color': color }">
        <navBar title="卡券兑换" multiple_Card bgColor="transparent"></navBar>
        <view class="exchange">
            <text class="black size36 bold">请输入兑换码/卡密</text>
            <input type="text" class="exchange-Input" placeholder="请输入..." />
            <view class="NowBtn" @click="show = true">立即兑换</view>
        </view>
        <view class="list">
            <view class="flex-1 d-flex f-column">
                <text class="CDKEY">ONHuiaewtroi7</text>
                <text class="Date">2024-07-31 12:14:08</text>
            </view>
            <text class="color size30 bold">兑换成功</text>
            <view class="theme-Tips Tips">服务卡</view>
        </view>
        <view class="list">
            <view class="flex-1">
                <view class="Tips">服务卡</view>
                <view class="CDKEY m-top10">ONHuiaewtroi7</view>
            </view>
            <view class="oldDate">
                <text>2024-07-31</text>
                <text>12:14:08</text>
            </view>
        </view>
        <view class="list">
            <view class="flex-1">
                <view class="Tips">优惠券</view>
                <view class="CDKEY m-top10">ONHuiaewtroi7</view>
            </view>
            <view class="oldDate">
                <text>2024-07-31</text>
                <text>12:14:08</text>
            </view>
        </view>
        <emptys empty="coupon" title="暂无相关记录"></emptys>
        <u-popup :show="show" @close="show = false" :safeAreaInsetBottom="false" mode="center" :round="10">
            <Successful @Close="show = false"></Successful>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    import Successful from '@/subCard/components/Successful.vue'
    export default {
        components: { Successful },
        data() {
            return {
                show: false
            }
        },
        methods: {},
        computed: {
            ...mapState(['color'])
        }
    }
</script>
<style>
    page {
        background-color: #f2f2f2;
    }
</style>
<style lang="scss" scoped>
    .exchange {
        width: 690rpx;
        padding: 50rpx 30rpx;
        background-color: #ffffff;
        margin: 40rpx auto;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        &-Input {
            width: 100%;
            height: 80rpx;
            background-color: #f2f2f2;
            padding: 0 14rpx;
            border-radius: 10rpx;
            color: black;
            font-size: 30rpx;
            margin-top: 30rpx;
        }
        .NowBtn {
            width: 100%;
            height: 90rpx;
            background-color: var(--color);
            color: #ffffff;
            font-size: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 45rpx;
            margin-top: 36rpx;
        }
    }
    .list {
        width: 690rpx;
        background-color: #ffffff;
        padding: 36rpx 30rpx;
        border-radius: 20rpx;
        margin: 24rpx auto;
        position: relative;
        display: flex;
        align-items: center;
        .CDKEY {
            color: #000;
            font-size: 38rpx;
            font-weight: bold;
        }
        .Date {
            color: #999;
            font-size: 26rpx;
            margin-top: 8rpx;
        }
        .theme-Tips {
            position: absolute;
            right: 20rpx;
            top: 10rpx;
        }
        .Tips {
            padding: 2rpx 8rpx;
            background-color: var(--color);
            color: #fff;
            font-size: 22rpx;
            display: inline;
        }
        .oldDate {
            display: flex;
            flex-direction: column;
            text-align: right;
            text {
                color: #999999;
                font-size: 26rpx;
            }
        }
    }
</style>
